<template>
  <div class="jiayi-container product">
    <Header/>
    <div class="main_pc">
      <div class="product_type">
        <el-table :data="productMenuList" row-key="id" :show-header="false" :default-expand-all="false"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" size="mini"
                  @row-click="handleChoiceProductType" :row-class-name="tableRowClassName">
          <el-table-column align="center" width="150">
            <template slot-scope="scope">
              <image-preview v-if="scope.row.parentId == '0'" :src="scope.row.poster" width="2.5rem" height="2.5rem"/>
            </template>
          </el-table-column>
          <el-table-column prop="name" align="left" class-name="product_type-name"/>
        </el-table>
      </div>
      <div class="product_list">
        <div class="product_list-query">
          <div style="width: 40%"></div>
          <el-input placeholder="请输入内容" v-model="queryParams.name" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getProduct(queryParams.typeId)"/>
          </el-input>
        </div>
        <div v-if="isEmptyArr(productList)" style="padding-top: 6rem">
          <el-skeleton :rows="6"/>
          <el-empty :image="expectImage">
            <template slot="description">&nbsp;</template>
          </el-empty>
          <el-skeleton :rows="6"/>
        </div>

        <el-row v-else :gutter="15" style="height: 85%;width: 100%;padding-left: 0.15rem;">
          <el-col :span="6" v-for="product in productList" class="product_list-item">
            <Card width="100%" height="100%" border-radius="0.3rem">
              <el-image :src="product.poster" @click="handleChoiceProduct(product)"/>
              <div class="name">
                {{product.name}}
              </div>
            </Card>
          </el-col>
        </el-row>
        <div class="product_list-page">
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getProduct(queryParams.typeId)" layout="prev, pager, next,total"/>
        </div>
      </div>
    </div>

    <div class="main_mt">
      <el-row :gutter="10" class="product_type">
        <el-col :span="8" v-for="type in productMenuList"
                :class="'product_type-item '+(type.id === queryParams.typeId ? 'product_type-item__check' : '')">
          <span @click="handleChoiceProductType(type)">{{ type.name }}</span>
        </el-col>
      </el-row>
      <div class="product_list">
        <div v-if="isEmptyArr(productList)" style="padding: 1rem;width: 80%">
          <el-skeleton :rows="6"/>
          <el-empty :image="expectImage">
            <template slot="description">&nbsp;</template>
          </el-empty>
          <el-skeleton :rows="6"/>
        </div>
        <div v-else>
          <div class="product_list-query">
            <el-input placeholder="请输入内容" v-model="queryParams.name" clearable>
              <el-button slot="append" icon="el-icon-search" @click="getProduct(queryParams.typeId)"/>
            </el-input>
          </div>
          <div class="product_list-list">
            <div v-for="product in productList" class="product_list-item">
              <Card width="100%" height="100%" border-radius="0.3rem">
                <el-image :src="product.poster" @click="handleChoiceProduct(product)"/>
                <div class="name">
                  {{product.name}}
                </div>
              </Card>
            </div>
          </div>
          <div class="product_list-page">
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getProduct(queryParams.typeId)" layout="prev, pager, next,total"/>
          </div>
        </div>
      </div>
    </div>
    <div class="call_me">
      <Call_me/>
    </div>
  </div>
</template>

<script>

import {get_product_list,get_productMenu} from "@/api";
import Call_me from "@/views/jiayi/call_me_sub";
import Header from "@/views/jiayi/header";
import {isEmptyArr} from "@/utils/zzDouUtils/arrayUtil";
import {decodeBase64, encodeBase64, isNotEmpty} from "@/utils/zzDouUtils/objUtil";


export default {
  name: "Jiayi_product",
  props: {},
  components: {Call_me,Header},
  computed: {
  },
  data() {
    return {
      doc: { },
      queryParams: {
        pageSize: 8,
        pageNum: 1,
        typeId: null,
        name: null,
      },
      productMenuList: [],
      productList: [],
      total: 0,
      expectImage: require("@/assets/images/expect.png")
    };
  },
  created(){
    this.getProductMenu();
    this.init();
  },
  beforeRouteUpdate(to, from, next) {
    this.init();
    next();
  },
  methods: {
    isEmptyArr,
    init(){
      this.$nextTick(()=>{
        let query = this.$route.query;
        if (isNotEmpty(query) && query.j){
          this.queryParams.typeId = decodeBase64(query.j);
        }
        this.getProduct();
      })
    },
    getProductMenu(){
      get_productMenu().then(response=>{
        this.productMenuList = this.handleTree(response.data);
      })
    },
    getProduct(){
      get_product_list(this.queryParams).then(response=>{
        this.productList = response.data;
        this.total = response.total;
      })
    },
    handleChoiceProductType(row, column, event){
      if (row.id === this.queryParams.typeId){
        this.queryParams.typeId = null;
      }else {
        this.queryParams.typeId = row.id;
      }
      this.getProduct();
    },
    handleChoiceProduct(row){
      // this.$router.push({path: '/product/info',query:{ j :encodeBase64(row.id)}})
      window.open(`/product/info?j=${encodeBase64(row.id)}`)
    },
    tableRowClassName({row, rowIndex}){
      if (row.id == this.queryParams.typeId){
        return 'product_type-item__check'
      }else {
        return 'product_type-item'
      }

    }
  }
};
</script>

<style scoped>
.product{
  overflow-x: hidden;
  overflow-y: auto;
}

.main_pc{
  padding-top: 1vh;
  width: 85%;
  min-height: 60vh;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}
.main_pc .product_type{
  width: 26%;
  height: auto;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
::v-deep .el-table .el-table__expand-icon{
  width: auto;
  font-size: 1.7rem;
  height: 2rem;
  padding: 1rem;
  margin: 0;
}
::v-deep .el-table .product_type-name{
  font-size: 1.2rem;
  font-weight: bold;
}

::v-deep .el-table .product_type-item__check{
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
::v-deep .el-table .product_type-item{
  color: #67c23a;
  background: #f0f9eb;
  border-color: #67C23A;
}

.main_pc .product_list{
  width: 70%;
  overflow: hidden;
  padding-top: 2rem;
}

.main_pc .product_list-query{
  width: 100%;
  height: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.main_pc .product_list-query .el-input{
  width: 30%;
}

.main_pc .product_list-query .el-input-group__append button.el-button{
  color: #FFFFFF;
  background: #67C23A;
}

.main_pc .product_list-item{
  width: 24%;
  height: 16rem;
  margin: 0.2rem 0 1.1rem 0;
  cursor: pointer;
}

.main_pc .product_list-item .el-image{
  width: 100%;
  height: 70%;
}
.main_pc .product_list-item .name{
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}
.main_pc .product_list-item :hover{
  transform: scale(0.95);
  transition-duration: 200ms;
}

.main_pc .product_list-page{
  width: 90%;
  height: 5%;
  text-align: right;
  padding-bottom: 1.3rem;
}


.call_me{
  margin-top:4%;
  width: 100%;
  background: #E4E7ED;
}

/*------- 响应式布局 -------*/
/* 手机（小屏幕） */
@media (width <= 992px) {
  html{
    font-size: 14px;
  }
  .product{
  }
  .main_pc{
    display: none;
  }
  .main_mt{
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: hidden auto;
    padding-top: 1.2vh;
  }
  .main_mt .product_type{
    width: 95%;
    height: auto;
    border-radius: 0.5rem;
    background: #ddebfd;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  .main_mt .product_type .product_type-item{
    font-size: 1rem;
    height: 2rem;
    padding: 0.1rem 0.2rem 0.1rem 0.2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .main_mt .product_type .product_type-item__check{
    text-align: center;
    border-radius: 0.5rem;
    background: #bad7fb;
  }
  .main_mt .product_list{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  .main_mt .product_list-query{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 0.5rem;
  }
  .main_mt .product_list-query .el-input{
    width: 100%;
    border-radius: 3rem !important;
  }
  .main_mt .product_list-list{
    width: 100%;
    margin: 0 auto;
    padding-top: 0.5rem;
    padding-left: 0.15rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  .main_mt .product_list-item{
    width: 48vw;
    height: 13rem;
    margin-bottom: 0.8rem;
    background: #409EFF;
  }
  .main_mt .product_list-item .el-image{
    width: 100%;
    height: 8.5rem;
  }
  .main_mt .product_list-item .name{
    padding: 0.4rem;
    font-weight: bold;
    color: #FFFFFF;
  }
}

/* 平板 */
@media (width > 992px) and (width < 1200px) {
  html{
    font-size: 12px;
  }

}

@media (width > 992px) {
  .main_mt{
    display: none;
  }
}

</style>
